<template>
<div class="container">
  <div class="handle-box">

      <el-row>
<!--          <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">-->
<!--              <el-button type="primary" icon="el-icon-delete" class="handle-del mr10 deleteButtons"-->
<!--                         @click="delAllSelection">批量删除-->
<!--              </el-button>-->
<!--          </el-col>-->
          <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
              <el-button type="primary" icon="el-icon-delete" class="handle-del mr10 deleteButtons"
                         @click="handleCollegeAdd">添加学院
              </el-button>
          </el-col>
<!--          <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
              <el-input v-model="keyWord" placeholder="请输入学院编号" class="handle-input mr10 searchLabel"/>
          </el-col>
          <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
              <el-button class="searchButton" type="primary" icon="el-icon-search" @click="handleSearch(keyWord)">
                  搜索
              </el-button>
          </el-col>-->
      </el-row>
      <el-table :row-class-name="tableRowClassName" :data="tableData" border class="table" ref="multipleTable"
                header-cell-class-name="table-header"
                @selection-change="handleCollegeSelectionChange" @expand-change="getChild"
      >
          <el-table-column type="expand">
              <template slot-scope="scope">
                  <el-table :data="scope.row.children" @selection-change="handleClazzSelectionChange">
                      <el-table-column width="48"></el-table-column>
                      <el-table-column type="selection" align="center"></el-table-column>
                      <el-table-column label="班级编号" min-width="181" align="center">
                          <template slot-scope="scope">
                              {{scope.$index + 1}}
                          </template>
                      </el-table-column>
                      <el-table-column prop="name" label="班级名称" min-width="180" align="center"/>
                      <el-table-column label="班级操作" min-width="180" align="center">
                          <template slot-scope="scope">
                              <el-button type="text" class="editClazzButton" icon="el-icon-edit"
                                         @click="handleClazzEdit(scope.$index, scope.row)">编辑
                              </el-button>
                              <el-button type="text" icon="el-icon-delete" class="red deleteClazzButton"
                                         @click="handleClazzDelete(scope.$index, scope.row)">删除
                              </el-button>
                          </template>
                      </el-table-column>
                  </el-table>
              </template>
          </el-table-column>
          <el-table-column type="selection" align="center"></el-table-column>
          <el-table-column type="index" :index="indexMethod" label="编号" width="180"
                           align="center"></el-table-column>
          <el-table-column prop="name" label="院系名称" min-width="180" align="center"/>
          <el-table-column label="院系操作" min-width="180" align="center">
              <template slot-scope="scope">
                  <el-button type="text" class="editCollegeButton" icon="el-icon-plus"
                             @click="handleClazzAdd(scope.$index, scope.row)">添加班级
                  </el-button>
                  <el-button type="text" class="editCollegeButton" icon="el-icon-edit"
                             @click="handleCollegeEdit(scope.$index, scope.row)">编辑
                  </el-button>
                  <el-button type="text" icon="el-icon-delete" class="red deleteCollegeButton"
                             @click="handleCollegeDelete(scope.$index, scope.row)">删除
                  </el-button>
              </template>
          </el-table-column>
      </el-table>
      <div class="pagination">
          <el-pagination background layout="total, prev, pager, next" :current-page="query.currentPage"
                         :page-size="query.pageSize" :total="query.total" @current-change="handlePageChange"
          />
      </div>

      <!-- 添加院系弹出框 -->
      <el-dialog title="添加院系信息" :visible.sync="addCollegeVisible" width="30%">
          <el-form :model="collegeForm" label-width="30%">
              <el-row>
                  <el-form-item label="院系名称">
                      <el-input v-model="collegeForm.name" prefix-icon="el-icon-search" placeholder="请输入院系名称"
                                autocomplete="off"></el-input>
                  </el-form-item>
              </el-row>

              <el-form-item>
                  <el-button class="submitButton" type="primary" @click="submitCollege">添加</el-button>

                  <el-button class="cancelButton" @click="cancel">取消</el-button>

              </el-form-item>


          </el-form>
      </el-dialog>

      <!-- 添加班级弹出框 -->
      <el-dialog title="添加班级信息" :visible.sync="addClazzVisible" width="30%" :before-close="tests">
          <el-form :model="clazzForm" label-width="30%">
              <el-row>
                  <el-form-item label="班级名称">
                      <el-input v-model="clazzForm.name" prefix-icon="el-icon-search" placeholder="请输入班级名称"
                                autocomplete="off"></el-input>
                  </el-form-item>
              </el-row>

              <el-form-item>
                  <el-button class="submitButton" type="primary" @click="submitClazz">添加</el-button>
                  <el-button class="cancelButton" @click="cancel">取消</el-button>
              </el-form-item>


          </el-form>
      </el-dialog>

      <!-- 编辑院系弹出框 -->
      <el-dialog title="编辑院系信息" :visible.sync="editCollegeVisible" width="30%">
          <el-form :model="collegeForm" label-width="30%">
              <el-row>
                  <el-form-item label="院系编号">
                      <el-input disabled prefix-icon="el-icon-search" placeholder="请输入院系编号"
                                v-model="collegeForm.id" autocomplete="off"></el-input>
                  </el-form-item>

              </el-row>
              <el-row>
                  <el-form-item label="院系名称">
                      <el-input v-model="collegeForm.name" prefix-icon="el-icon-search" placeholder="请输入院系名称"
                                autocomplete="off"></el-input>
                  </el-form-item>
              </el-row>

              <el-form-item>
                  <el-button class="submitButton" type="primary" @click="editCollege">编辑</el-button>
                  <el-button class="cancelButton" @click="cancel">取消</el-button>
              </el-form-item>


          </el-form>
      </el-dialog>

      <!-- 编辑班级弹出框 -->
      <el-dialog title="编辑班级信息" :visible.sync="editClazzVisible" width="30%">
          <el-form :model="clazzForm" label-width="30%">
              <el-row>
                  <el-form-item label="班级编号">
                      <el-input disabled prefix-icon="el-icon-search" placeholder="请输入院系编号" v-model="clazzForm.id"
                                autocomplete="off"></el-input>
                  </el-form-item>

              </el-row>
              <el-row>
                  <el-form-item label="班级名称">
                      <el-input v-model="clazzForm.name" prefix-icon="el-icon-search" placeholder="请输入班级名称"
                                autocomplete="off"></el-input>
                  </el-form-item>
              </el-row>

              <el-form-item>
                  <el-button class="submitButton" type="primary" @click="editClazz">编辑</el-button>
                  <el-button class="cancelButton" @click="cancel">取消</el-button>
              </el-form-item>


          </el-form>
      </el-dialog>
  </div>
</div>
</template>

<script>
import info from '../../utils/info';
import college from '../../utils/college';
import {
  queryColleges,
  addCollege,
  updateCollege,
  deleteCollege,
  queryClazzByCollegeId,
  addClazz,
  updateClazz, deleteClazz
} from '../../api/index';

export default {
  name: 'collegeManage',
  data() {
      return {
          list: [],
          /*展开行*/
          expandList: [],

          keyWord: '',
          addCollegeVisible: false,
          editCollegeVisible: false,
          addClazzVisible: false,
          editClazzVisible: false,
          /* 分页 */
          query: {
              total: 7,
              pageSize: 7,
              currentPage: 1
          },
          collegeForm: {
              id: '',
              name: ''
          },
          clazzForm: {
              id: '',
              name: ''
          },
          tableData: [],
          multipleCollegeSelection: [],
          multipleClazzSelection: [],
          delList: [],
          idx: -1,
          id: -1,
          college: {
              collegeId: '',
              name: ''
          },
          collegeList: [],
          clazzList: [],
          formLabelWidth: '30%',

          collegeIndex: 0,
          clazzIndex: 0,

          currentCollegeId: '',
          currentClazzId: '',

          status: false
          /* 数据校验 */
          // rule: {
          //
          // }
      };
  },
  created() {
      this.getData();
  },
  mounted() {
  },
  methods: {
      async getData() {
          let current = this.query.currentPage;
          let size = this.query.pageSize;
          const data = await queryColleges({current:current,size:size});
          this.tableData = data.records;
          for (let i = 0; i < this.tableData.length; i++) {
              this.tableData[i].children = [];
          }
          this.query.total = data.total;

          this.list = [];
          for (let i = 0; i < data.records.length; i++) {
              let id = i + 1;
              let collegeId = data.records[i].collegeId;
              let ids = {
                  id: id,
                  collegeId: collegeId
              };
              this.list.push(ids);
          }


          //console.log(this.list);
      },

      async getChild(row, expandedRows) {
          this.status = false;
          if (expandedRows.length > 0) {

              this.status = true;

              this.tableData[this.collegeIndex].children = [];

              let collegeId = this.list[row.index].collegeId;
              const data = await queryClazzByCollegeId({ collegeId: collegeId });

              for (let i = 0; i < data.list.length; i++) {
                  this.tableData[row.index].children.push(data.list[i]);
              }


              //this.$set(this.tableData[row.index],'children',data.list);
          }
      },


      tableRowClassName({ row, rowIndex }) {
          // 把每一行的索引放进row
          row.index = rowIndex;
      },

      handleCollegeAdd(index, row) {
          this.addCollegeVisible = true;

      },

      // 编辑操作
      handleCollegeEdit(index, row) {
          this.editCollegeVisible = true;
          this.collegeIndex = index + 1;
          console.log(this.collegeIndex);
          console.log(this.list[this.collegeIndex - 1].collegeId);

      },
      // 删除操作
      async handleCollegeDelete(index, row) {

          const data = await queryClazzByCollegeId({collegeId:row.collegeId});

        if(data.list.length === 0){
          let collegeId = this.list[index].collegeId;
          console.log(collegeId);
          const data = await deleteCollege({ collegeId: collegeId });
          this.$message.success('删除成功!');
          this.getData();
        }else{
            this.$message.info("请先删除班级!");
        }
      },


      async handleClazzAdd(index, row) {
          this.addClazzVisible = true;
          this.collegeIndex = index;
      },


      handleClazzEdit(index, row) {
          this.editClazzVisible = true;
          this.currentCollegeId = row.collegeId;
          this.currentClazzId = row.clazzId;
          console.log(row);
          for (let i = 0; i < this.list.length; i++) {
              if (this.list[i].collegeId === this.currentCollegeId) {
                  this.collegeIndex = this.list[i].id - 1;
                  break;
              }
          }


      },

      async handleClazzDelete(index, row) {

          this.currentCollegeId = row.collegeId;

          for (let i = 0; i < this.list.length; i++) {
              if (this.list[i].collegeId === this.currentCollegeId) {
                  this.collegeIndex = this.list[i].id - 1;
                  break;
              }
          }

          let list = this.tableData[this.collegeIndex].children;

          let clazzId = row.clazzId;
          await deleteClazz({ clazzId });


          let temp = index;

          console.log(temp);

        list.splice(temp, 1);

          let collegeId = this.currentCollegeId;
          const data = await queryClazzByCollegeId({ collegeId });


          this.tableData[this.collegeIndex].children = list;

          console.log(this.tableData[this.collegeIndex].children);

          this.$message.success('删除成功!');
      },

      // 触发搜索按钮
      handleSearch(keyWord) {


          //this.getData();
      },


      // college多选
      handleCollegeSelectionChange(val) {
          this.multipleCollegeSelection = val;
          // console.log(val)
      },
      // clazz多选
      handleClazzSelectionChange(val) {
          this.multipleClazzSelection = val;
      },
      // 多删
      delAllSelection() {
          // 获得多选删除的id数组
          const collegeLength = this.multipleCollegeSelection.length;
          const clazzLength = this.multipleClazzSelection.length;
          if (collegeLength === 0 && clazzLength === 0) {
              this.$message.error(`请选择要删除的对象`);
          } else {
              for (let i = 0; i < this.multipleCollegeSelection.length; i++) {
                  let collegeId = this.multipleCollegeSelection[i].collegeId;
                  let name = this.multipleCollegeSelection[i].name;
                  let college =
                      {
                          'collegeId': collegeId,
                          'name': name
                      };
                  this.collegeList.push(college);
              }

              console.log(this.collegeList);

              for (let i = 0; i < this.multipleClazzSelection.length; i++) {
                  let clazzId = this.multipleClazzSelection[i].clazzId;
                  let name = this.multipleClazzSelection[i].name;
                  let clazz =
                      {
                          'clazzId': clazzId,
                          'name': name
                      };
                  this.clazzList.push(clazz);
              }
              console.log(this.clazzList);

              // 合并数组 发到后台
              //todo 发送删除请求
          }

      },

      // 分页导航
      async handlePageChange(val) {
          console.log(val);
          let size = this.query.pageSize;
          const data = await queryColleges({ current: val,size:size});
          this.tableData = data.records;
          this.query.total = data.total;
          console.log(this.tableData);

          this.list = [];
          for (let i = 0; i < data.records.length; i++) {
              let id = i + 1;
              let collegeId = data.records[i].collegeId;
              let ids = {
                  id: id,
                  collegeId: collegeId
              };
              this.list.push(ids);
          }
      },

      indexMethod(index) {
          return (this.query.currentPage - 1) * this.query.pageSize + index + 1;
      },

      handleExpand(index) {
          console.log('哈哈哈:' + index);
      },

      // 提交表单
      // 提交学院表单
      async submitCollege() {

          let name = this.collegeForm.name;
          console.log(name);
          const data = await addCollege({ name: name });

          this.$message.success('提交成功!');
          this.getData();
          this.addCollegeVisible = false;
          this.editCollegeVisible = false;
      },

      async editCollege() {
          console.log(this.list);
          let collegeId = this.list[this.collegeIndex - 1].collegeId;
          let name = this.collegeForm.name;
          console.log(collegeId);
          const data = await updateCollege({ collegeId: collegeId, name: name });

          this.$message.success('修改成功!');
          /* 刷新 */
          this.getData();
          this.addCollegeVisible = false;
          this.editCollegeVisible = false;
      },

      // 提交班级表单
      async submitClazz() {

        let name = this.clazzForm.name;
        let collegeId = this.list[this.collegeIndex].collegeId;


        await addClazz({ name, collegeId }).then((res) => {
          console.log(res);
        });


        let clazz = {
            'clazzId': null,
            'collegeId': collegeId,
            'name': name,
            'collegeName': null
        };

        let list = this.tableData[this.collegeIndex].children;
        list.push(clazz);


        let data = await queryClazzByCollegeId({ collegeId });
        // let newList = list;
        for(let i = 0;i < data.list.length;i++){
          for(let j = 0;j < list.length;j++){
            if(list[j].name === data.list[i].name){
              list[j].clazzId = data.list[i].clazzId;
            }
          }
        }
        this.tableData[this.collegeIndex].children = list;
        //console.log(this.tableData[this.collegeIndex].children);


          this.$message.success('添加成功!');
          //this.clazzForm = {};
          this.addClazzVisible = false;
          this.editClazzVisible = false;
      },

      //编辑院系
      async editClazz() {

          let clazzId = this.currentClazzId;
          let collegeId = this.currentCollegeId;
          let name = this.clazzForm.name;

          await updateClazz({ clazzId, name, collegeId });

        let list = this.tableData[this.collegeIndex].children;

        const data = await queryClazzByCollegeId({ collegeId: collegeId });

        for(let i = 0;i < data.list.length;i++){
          for(let j = 0;j < list.length;j++){
            if(list[j].clazzId === data.list[i].clazzId){
              list[j].name = data.list[i].name;
            }
          }
        }

        this.tableData[this.collegeIndex].children = list;

          this.$message.success('修改成功!');

          this.addClazzVisible = false;
          this.editClazzVisible = false;
      },

      // 取消表单
      cancel() {
          this.addClazzVisible = false;
          this.addCollegeVisible = false;
          this.editCollegeVisible = false;
          this.editClazzVisible = false;
      },

      tests() {
          console.log('hahaha');
      }

  },
  watch: {

      addCollegeVisible() {
          if (this.addCollegeVisible === false) {
              this.collegeForm = {};
          }
      },
      editCollegeVisible() {
          if (this.editCollegeVisible === false) {
              this.collegeForm = {};
          }
      },
      addClazzVisible() {
          if (this.addClazzVisible === false) {
              this.clazzForm = {};
          }
      },
      editClazzVisible() {
          if (this.editClazzVisible === false) {
              this.clazzForm = {};
          }
      }

      // status: {
      //     handler(newVal, oldVal) {
      //         console.log(newVal);
      //
      //     }
      // }
  }
};
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}


.handle-input {
  width: 300px;
  display: inline-block;
}

.time {
  width: 100%;
}

.table {
  width: 100%;
  font-size: 14px;
}

.red {
  color: #ff0000;
}

.mr10 {
  margin-right: 10px;
}

/* 按钮大小 */
.editCollegeButton, .deleteCollegeButton {
  font-size: 14px;
}

.editClazzButton, .deleteClazzButton {
  font-size: 13px;
}

.searchLabel {
  margin-left: 40%;
}

.searchButton {
  margin-left: 100%;
}

.test {
  background-color: pink;
}


</style>
